<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>卡片名称</span>
		</div>
		<div class="text">
			<div class="img_center">
				<Glass />
			</div>
			<div class="descriptions">
				<el-descriptions class="margin-top" :column="1" :size="size" border>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-user"></i>
							登陆名称
						</template>
						{{getUser.username}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-mobile-phone"></i>
							手机号码
						</template>
						{{ getUser.phone }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-location-outline"></i>
							所属部门
						</template>
						{{ area }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-tickets"></i>
							邮箱地址
						</template>
						<el-tag size="small">{{ getUser.email }}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item>
						<template slot="label">
							<i class="el-icon-office-building"></i>
							创建时间
						</template>
						<Data />
					</el-descriptions-item>
				</el-descriptions>
			</div>
		</div>
	</el-card>
</template>

<script>
import Data from './Data'
import Glass from './Glass'

import { mapState } from 'vuex'

export default {
	name: 'CardC',
	components: { Data , Glass },
	data() {
		return {
			size: '',
		}
	},
	computed: {
		...mapState(['getUser','area','getUser'])
	}
}
</script>

<style scoped>
.box-card {
	width: 400px;
	margin-right: 20px;
}

.img_center {
	width: 100%;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.descriptions {
	margin-top: 20px;
}

.imgDog {
	width: 100px;
	height: 100px;
	border-radius: 15px;
	margin-bottom: 20px;
}

</style>